<template>
	<view class="person_bank_revise">
		<view class="main">
			
			 
				<u-form labelWidth="200rpx">
					
					<u-form-item label="办理套餐">
						 <u-input v-model="goodsName" disabled type="text" :clearable="false" />
					</u-form-item>
					<u-form-item label="办理人姓名">
						<u-input v-model="formData.certName" type="text" :clearable="false" placeholder="请输入办理人姓名" />
					</u-form-item>
					
					<u-form-item label="办理人电话">
						<u-input v-model="formData.contactNum" type="number" maxlength="11" :clearable="false" placeholder="请输入办理人电话" />
					</u-form-item>
					
					<u-form-item label="办理人身份证">
						 <u-input v-model="formData.certNo" type="text" maxlength="18" :clearable="false" placeholder="请输入办理人身份证" />
					</u-form-item>
					
					<u-form-item label="办理人城市">
						 <u-input v-model="cityValue"  disabled :clearable="false" placeholder="请选择办理人城市"  type="select"  @click="towshow=true" >
					
						 </u-input>
					</u-form-item>
					
					<!-- <u-form-item label="收货地址">
						 <u-input v-model="cityValue_2"  disabled :clearable="false" placeholder="请选择办理人城市"  type="select"  @click="towshow_2=true" >
					
						 </u-input>
					</u-form-item> -->


					
					<u-form-item label="选择号码" v-if="this.is_selection ==1">
						 <u-input v-model="formData.number"  disabled :clearable="false" placeholder="请选择号码"  type="select"  @click="xuanhao()" >
					
						 </u-input>
					</u-form-item>
					
					
					<!-- <view class="input">
						<view class="left">办理人城市</view>
						<view class="right">
							<view class="right_text" @click="towshow=true">
								<view class="r_txt" :class="areaCode.length?'r_txt_color':''"></view>
								<u-icon name="arrow-right" color="#bbb" size="28"></u-icon>
							</view>
						</view>
					</view> -->
					
				
					
					<u-form-item label="收货人地址" label-position="top">
						 <u-input v-model="formData.postAddr" type="textarea" :clearable="false" placeholder="请输入收货人地址" />
					</u-form-item>
				</u-form>
		 
			  
		
			
		</view>
		<!-- 底部 -->
		<u-picker mode="region" v-model="towshow" confirm-color='#26C281' :area-code='areaCode' @confirm='confirmBtn'></u-picker>
		<!-- <u-picker mode="region" v-model="towshow_2" confirm-color='#26C281' :area-code='areaCode_2' @confirm='confirmBtn2'></u-picker> -->
		<BottomBtn title='提交订单' @submit='submitBtn' :bottombtn="100"></BottomBtn>
		
		<!-- <u-select v-model="show" mode="mutil-column-auto" :list="cityList" @confirm="confirmSelect"></u-select> -->
		<!-- <u-select v-model="show_2" mode="mutil-column-auto" :list="cityList_2" @confirm="confirmSelect2"></u-select> -->
		<!-- <u-select v-model="phoneshow" :list="phoneList" value-name='id' label-name='name' confirm-color='#26C281' @confirm='phoneSelect'></u-select> -->
	
		<u-popup v-model="phoneshow" mode="bottom" border-radius="16" width="590rpx" height="740rpx">
			<view class="phone-popup">
				<view class="top-phone">
					<view @click="closePhone">取消</view>
					<view style="color: #26C281" @click="confirmPhone">确定</view>
				</view>
				<view class="search-phone">
					<u-input v-model="searchValue" :clearable="false" placeholder="请输入手机号搜索" @confirm="xuanhao" />
				</view>
				<scroll-view scroll-y class="phone-list" @scrolltolower="scrolltolowerPhone">
					<u-radio-group wrap v-model="formData.number" active-color="#26C281">
						<u-radio
							v-for="(item, index) in phoneList" :key="index" 
							:name="item.name"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</scroll-view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	import AreaSelect from "@/components/areaSelect.vue"
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn,
			AreaSelect
		},
		data() {
			return {
				formData:{
					certName: "",
					certNo: "",
					postProvinceName: "",
					postCityName: "",
					postDistrictName: "",
					postAddr: "",
					contactNum: "",
					number:"",
					safe_code: "",
					uniqsn:"",
					check_code:"",
					cardType: ""
				},
				region:'请选择省市区',
				areaCode:[],
				areaCode_2:[],
				haoma:'',
				goodsName:"",
				cityValue: "",
				is_selection:1,
				cityValue_2:"",
				show: false,
				show_2:false,
				towshow:false,
				towshow_2:false,
				phoneshow:false,
				shouhuoshow:false,
				cityList: [],
				cityList_2:[],
				shouhuocityList:[],
			   searchValue:'',
			   phoneList:[],
			   phoneLoading: false,
			  pageNo:1
			};
		},
		onLoad({id,name,agid,is_selection}) {
			this.formData.cardType=id
			this.goodsName=name
			this.formData.agid=agid
			this.is_selection = is_selection
		},
		methods:{
			
			confirmSelect(e) {
				console.log(e);
				let [p,c,a] = e 
				let str = ""
				if ( p ) {
					this.formData.provinceName = p.label
					str += p.label
				}
				if ( c ) {
					this.formData.cityName = c.label
					str += "-" + c.label
				}
				if ( c ) {
					this.formData.shipping_area = a.label
					str += "-" + a.label
				}
				this.cityValue = str
			},
			confirmSelect2(e) {
				console.log(e);
				let [p,c,a] = e
				let str = ""
				if ( p ) {
					this.formData.shipping_province = p.label
					str += p.label
				}
				if ( c ) {
					this.formData.shipping_city = c.label
					str += "-" + c.label
				}
				if ( c ) {
					this.formData.shipping_area = a.label
					str += "-" + a.label
				}
				this.cityValue_2 = str
			},
			
			
			phoneSelect(e){
				console.log(e);
				this.formData.number = e[0].label
				 // this.formData.check_code = e[0].code; // 获取code值
				// this.formData.check_code = e[0].label
			},
			
			// 获取省市县
			async getCity () {
				let res = await this.$httpApi.getCity({ id: this.formData.id })
				// console.log( res );
				if ( res.code  == 1 ) {
					this.cityList = this.matCity(res.data)
					console.log(this.cityList);
				} else if ( res.code == 0 ) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},
			confirmPhone() {
				var item = this.phoneList.find(item => item.name === this.formData.number);
				
				this.formData.check_code = item.code
				this.pageNo = 1
				this.phoneList = []
				this.phoneshow = false
			},
			closePhone() {
				this.pageNo = 1
				this.phoneList = []
				this.phoneshow = false
				this.formData.number = ''
			},
			xuanhao(){
				if(this.phoneLoading) {
					return
				}
				this.pageNo = 1
				this.phoneList = []
				this.phoneLoading = true
				uni.showLoading()
				var params = {
					cardType: this.formData.cardType,
					provinceName:this.formData.provinceName,
					cityName:this.formData.cityName,
					pageNo:this.pageNo,
					searchValue:this.searchValue,
					
				}
				this.formData.pageNo = this.pageNo
				this.formData.searchValue = this.searchValue
				this.$httpApi.haoma(this.formData).then((res)=>{
					// that.$tips.hideLoading()
					// console.log(res.data.data.numArray);
					this.phoneLoading = false
					uni.hideLoading()
					if(res.code==1){
						if(res.data.data.uniqsn){
							this.formData.uniqsn = res.data.data.uniqsn;
						}
						this.phoneList = res.data.data.numArrayTwo
						this.phoneshow = true
					}else{
						this.phoneshow = false;
						this.phoneList = '';
					}
					
				})
			},
			scrolltolowerPhone() {
				if(this.phoneLoading) {
					return
				}
				this.pageNo ++;
				this.phoneLoading = true
				uni.showLoading()
				var params = {
					cardType: this.formData.cardType,
					provinceName:this.formData.provinceName,
					cityName:this.formData.cityName,
					pageNo:this.pageNo,
					searchValue:this.searchValue,
				}
				
				this.$httpApi.haoma(params).then((res)=>{
					this.phoneLoading = false
					uni.hideLoading()
					if(res.code==1){
						this.phoneList = this.phoneList.concat(res.data.data.numArrayTwo)
					}
				})
			},
			// 格式化省市区
			matCity( arr ) {
				if ( arr && arr.length ) {
					arr.forEach( el => {
						el.label = el.value
						if ( el.child && el.child.length ) {
							el.children = this.matCity( el.child )
						}
					})
				}
				return arr
			},
			
			matPhone( arr ) {
				if ( arr && arr.length ) {
					arr.forEach( el => {
						el = el.value
					})
				}
				return arr
			},
			
			//选择省市县
			showAddress() {
				this.region=val.province.label+''+val.city.label+''+val.area.label
				this.areaCode=[val.province.value,val.city.value,val.area.value]
			},
			
			// 选择地址
			confirmBtn(val){
				this.region=val.province.label+''+val.city.label+''+val.area.label
				this.cityValue                     = this.region
				this.formData.provinceName         = val.province.label;
				this.formData.cityName             = val.city.label;
				this.formData.postProvinceName     = val.province.label;
				this.formData.postCityName         = val.city.label;
				this.formData.postDistrictName     = val.area.label;
				this.areaCode=[val.province.value,val.city.value,val.area.value]
			},
			confirmBtn2(val){
				this.region                        = val.province.label+''+val.city.label+''+val.area.label
				this.cityValue_2                  = this.region
				this.formData.postProvinceName     = val.province.label;
				this.formData.postCityName         = val.city.label;
				this.formData.postDistrictName     = val.area.label;
				this.areaCode_2=[val.province.value,val.city.value,val.area.value]
			},
			// 底部按钮
			submitBtn(){
				var that = this
		
				that.$tips.showLoading('提交中')
				// console.log(this.formData.check_code);return
				that.$httpApi.createOrderTwo(this.formData).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('提交成功')
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.phone-popup {
		padding: 50rpx;
	}
	.top-phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search-phone {
		padding: 20rpx 0;
	}
	.phone-list {
		height: 480rpx;
	}
	.person_bank_revise{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 20rpx 32rpx;
			background: #fff;
			// .input{
			// 	width: 100%;
			// 	height: 100rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	.left{
			// 		width: 200rpx;
			// 		font-size: 28rpx;
			// 		font-family: PingFang SC-Medium, PingFang SC;
			// 		font-weight: 500;
			// 		color: #222222;
			// 	}
			// 	.right{
			// 		width: calc(100% - 200rpx);
			// 		display: flex;
			// 		align-items: center;
			// 		u-input{
			// 			width: 100%;
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Medium, PingFang SC;
			// 			font-weight: 500;
			// 			color: #222222;
			// 		}
			// 		.right_text{
			// 			width: 100%;
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: space-between;
			// 			.r_txt{
			// 				font-size: 28rpx;
			// 				font-weight: 500;
			// 				color: rgb(192, 196, 204);
			// 			}
			// 			.r_txt_color{
			// 				color: #222222;
			// 			}
			// 		}
			// 	}
			// 	.right_code{
			// 		width: calc(100% - 200rpx);
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		u-input{
			// 			width: calc(100% - 160rpx);
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Medium, PingFang SC;
			// 			font-weight: 500;
			// 			color: #222222;
			// 		}
			// 		text{
			// 			display: block;
			// 			width: 160rpx;
			// 			line-height: 70rpx;
			// 			text-align: center;
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Regular, PingFang SC;
			// 			font-weight: 400;
			// 			color: #26C281;
			// 		}
			// 	}
			// }
		}
	}
</style>
